<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Document</title>
	<script src="jquery-1.11.3.min.js"></script>
    <style>
    .question-list {
	margin-top: 15px;
	width: 100%;
	height: 500px;
	background-color: #FFFFFF;
}

.question-list-title {
	width: 100%;
	height: 30px;
	line-height: 30px;
}

.question-list-title div {
	float: left;
	width: 90%;
	margin-left: 3%;
	line-height: 36px;
	height: 28px;
	font-size: 15px;
	font-family: PingFang;
	font-weight: 400;
	color: #000000;
}
.question-list-content{
	margin-top: 10px;
	width: 100%;
	height: 300px;
}
/*手风琴样式*/
* {
	margin: 0;
	padding: 0;
	list-style-type: none;
}

a,
img {
	border: 0;
}




/* expmenu */

ul.expmenu {
	width: 100%;
}

ul.expmenu li div.header {
	padding: 12px;
	border-bottom: 1px #E5E5E5 solid;
}

ul.expmenu li:last-child div.header {
	border-bottom: none;
}

ul.expmenu li ul li {
	background-color: #FFFFFF;
	padding: 12px;
	border-bottom: 1px solid #d2c8b5;
	border-top: 1px solid #d2c8b5;
	color: #727272;
	text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.8);
}

ul.expmenu li ul li:last-child {
	border-bottom: none;
}

ul.expmenu li ul li.selected {
	background-color: #f4f4f4;
}

ul.expmenu div.header {
	color: #000000;
	text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.2);
	background: #FFFFFF;
	/* Old browsers */
	/*background: -moz-linear-gradient(top, #ae9c7e 0%, #ae9c7e 100%);*/
	/* FF3.6+ */
	/*background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ae9c7e), color-stop(100%, #ae9c7e));*/
	/* Chrome,Safari4+ */
	/*background: -webkit-linear-gradient(top, #ae9c7e 0%, #ae9c7e 100%);*/
	/* Chrome10+,Safari5.1+ */
	/*background: -o-linear-gradient(top, #ae9c7e 0%, #ae9c7e 100%);*/
	/* Opera 11.10+ */
	/*background: -ms-linear-gradient(top, #ae9c7e 0%, #ae9c7e 100%);*/
	/* IE10+ */
	/*background: linear-gradient(to bottom, #ae9c7e 0%, #ae9c7e 100%);*/
	/* W3C */
	/*filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ae9c7e', endColorstr='#ae9c7e', GradientType=0);*/
	/* IE6-9 */
}
.comment-number {
	position: absolute;
    /* right: 2%; */
    /* left: 10px; */
    width: 16px;
    height: 18px;
    /*background-color: #42ACFF;
    border-radius: 25px;*/
}
.comment-number .toggleimg {
	display: block;
	width: 16px;
	height: 16px;
	background: no-repeat center;
	/*float: left;*/
	background-size: 80% 45%;
}
/*ul.expmenu li div.header .arrow.up */

.comment-number .toggleimg .selected  {
	background-image: url(../img/number-selected);
	
}

.comment-number .toggleimg .unselected {
	background-image: url(../img/number-unselected.png);
}
.comment-number span{
	    width: 16px;
    height: 18px;
    line-height: 18px;
    display: block;
    color: #FFF;
    font-size: 11px;
    text-align: center;
}
ul.expmenu li div.header .label {
	background: no-repeat;
	color: #000000;
	margin-left: 30px;
}

ul.expmenu li div.header .arrow {
	display: block;
	width: 16px;
	height: 16px;
	background: no-repeat center;
	float: right;
	    background-size: 80% 45%;
}

ul.expmenu li div.header .arrow.up {
	background-image: url(../img/arrow_u.png);
	
}

ul.expmenu li div.header .arrow.down {
	background-image: url(../img/arrow_d.png);
}

ul.expmenu  .questiondesc {
	display: none;
}
.questiondesc{
	width:80%;
	margin: 0 auto;
}
.questiondesc p{
	width:100%;
	letter-spacing: 1px;
}
.choosebtn{
	    width: 90%;
    margin: 10px auto;
    height: 30px;
    line-height: 30px;
    text-align: center;
}
.choosebtn div:first-child{
	float: left;
	width:40%;
	background-color: #0C7BE3;
	color:#FFFFFF;
	border-radius: 5px;
}
.choosebtn div:last-child{
	float: right;
	width:40%;
	border:1px solid #0C7BE3;
	border-radius: 10px;
}
/* Mouse Events */

ul.expmenu div.header:hover {
	background: #FFFFFF;
	cursor: pointer;
}

ul.expmenu li ul li:not(.selected):hover {
	background: #FFFFFF;
	/* Old browsers */
	cursor: pointer;
}

ul.expmenu li ul li:not(.selected):active {
	background: #FFFFFF;
	/* Old browsers */
	cursor: pointer;
}
    </style>
</head>
<body>
    <div class="question-list">
		<div class="question-list-title">
			<div>问题列表</div>
		</div>
		<div class="question-list-content">
			<ul class="expmenu">
				<li>
					<div class="header">
						<div class="comment-number">
							<span class="toggleimg selected"></span>
							<!--<span>1</span>-->
						</div>
						<span class="label">是否支持手机号码验证？</span>
						<span class="arrow down"></span>
					</div>
					<div class="questiondesc">
						<p>什么什么什么什么什么什么什么什么事没事没理财，是互联网金融行什么什么什么事没什么台。</p>
						<div class="choosebtn">
							<div>有用</div>
							<div>没用</div>
						</div>
					</div>
				</li>
				<li>
					<div class="header">
						<div class="comment-number">
							<span class="toggleimg unselected"></span>
							<!--<span>2</span>-->
						</div>
						<span class="label">如何成为神选车会员？</span>
						<span class="arrow down"></span>
					</div>
					<div class="questiondesc">
						<p>什么什么什么什么什么什么什么什么事没事没理财，是互联网金融行什么什么什么事没什么台。</p>
						<div class="choosebtn">
							<div>有用</div>
							<div>没用</div>
						</div>
					</div>
				</li>
				<li>
					<div class="header">
						<div class="comment-number">
							<span class="toggleimg unselected"></span>
							<!--<span>3</span>-->
						</div>
						<span class="label">手机收不到验证码怎么办？</span>
						<span class="arrow down"></span>
					</div>
					<div class="questiondesc">
						<p>什么什么什么什么什么什么什么什么事没事没理财，是互联网金融行什么什么什么事没什么台。</p>
						<div class="choosebtn">
							<div>有用</div>
							<div>没用</div>
						</div>
					</div>
				</li>
			</ul>
		</div>
	</div>
	<script>
	 $(function(){
			/* 滑动/展开 */
			$("ul.expmenu li > div.header").mouseover(function() {
				var arrow = $(this).find("span.arrow");
				if(arrow.hasClass("up")) {
					arrow.removeClass("up");
					arrow.addClass("down");
				} else if(arrow.hasClass("down")) {
					arrow.removeClass("down");
					arrow.addClass("up");
				}
				$(this).parent().find(".questiondesc").slideToggle();
			});
			/* 滑动/展开 */
			$("ul.expmenu li > div.header").mouseover(function() {
				var togglenumber = $(this).find("span.toggleimg");
				if(togglenumber.hasClass("selected")) {
					togglenumber.removeClass("selected");
					togglenumber.addClass("unselected");
				} else if(togglenumber.hasClass("unselected")) {
					togglenumber.removeClass("unselected");
					togglenumber.addClass("selected");
				}
				$(this).parent().find(".comment-number").slideToggle();
			});
			// $(".expmenu .header").hover(function(){
			// 	var arrow=$(this).find(".arrow");
			// 	if(arrow.match("up")){
			// 		arrow.removeClass("up");
			// 		arrow.addClass("down");
			// 	}
			// })
		})
	</script>
</body>
</html>